<style>
    /*订单显示*/
    .item{ width:270px; height:135px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
    .item .tags{width:20px;float:left;text-align:center;}
    .item .pic{width:100px; float:left;text-align:center;}
    .item .pic img{max-width:100px; max-height:135px;border-radius:5px;}
    .item .text{width: 150px;text-align:left;float: right;}
    .active{border: 1px solid #658ced;background-color: #f2f2f2;}
    .text-item{width: 100%;}
    .clear{clear:both;}
    .layui-btn-small {
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 12px;
    }
    .small-table{margin: 0; }
    .small-table td{padding: 4px;font-size: 10px}
</style>
<div class="fixed-bar">
    <form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search-optable" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="client_ordernum" value="{$client_ordernum}" lay-verify="" placeholder="输入订单号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">SKU</label>
                <div class="layui-input-inline">
                    <input type="text" name="sku" value="{$sku}" lay-verify="" placeholder="输入SKU" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">下单日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_date_range" readonly="" id="create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">出货日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="shipment_date_range" readonly="" id="shipment_date_range" lay-verify="" placeholder="选择出货日期" class="layui-input">
                </div>
            </div>

            <div class=" layui-inline layui-upload">
                <button type="submit" class="layui-btn"  lay-submit="" lay-filter="demo1"  >搜索</button>
            </div>
        </div>
    </form>
</div>

{include file="mp@out_node_progress/menu" /}

<div class="layui-collapse">
    <div class="layui-colla-item caigou">
        <h2 class="layui-colla-title" id="vue_tab_content">&nbsp;&nbsp;&nbsp;{{ status_sum }}</h2>
        <div id="view" class="layui-colla-content layui-show">
        </div>
    </div>
</div>

<script id="tpl" type="text/html">

    {{#  layui.each(d, function(kkk, vvv){ }}

    <div class="item layui-anim layui-anim-scaleSpring actionSendDeliver" data-option="{{ vvv.client_ordernum }}" >
        <a>
            <div class="pic">
                <img src="{{ vvv.pic_res }}"
                     class="lay-pic">
            </div>
        </a>
        <div class="text">
            <a>
                <div class="text-item"> 出货时间：{{ vvv.shipment_time }}&nbsp;</div>
                <span class="black showMaterialQianDetailTable" data-option="{{ vvv.client_ordernum }}" >{{ vvv.status_distributing_txt }}&nbsp;</span></br>
                <span class="copy-item blue">{{ vvv.client_ordernum }}</span>&nbsp;&nbsp; <span class="layui-btn layui-btn-small layui-btn-warm">{{ vvv.type_txt }}</span><br>
                <span class="copy-item blue">{{ vvv.sku }}</span></br>
                <span class="blue" id="getOrderDetail-{{vvv.id}}" onmouseover="getOrderDetail({{vvv.id}})" >{{ vvv.quantity }}</span>&nbsp;件
                &nbsp;<br>
            </a>
            <div class="text-item">
                <select onchange="select_group_id(this,{{ vvv.id }})" style="max-width: 100px;height: 25px;" class="mimo-select">
                    {{#  layui.each(vvv.groupList, function(k2, v2){ }}
                    <option value="{{ k2 }}"  {{#  if(k2 == vvv.g_id){ }} selected {{# } }}>
                        {{ v2 }}
                    </option>
                    {{#  }); }}
                </select>

                <a href="{:url('unitSet')}?order_id={{ vvv.id }}" style="float:right" title="订单操作" class="hisi-iframe" hisi-data="{width: '800px', height: '500px'}"><i class="aicon ai-caidan" style="font-size:25px;"></i>&nbsp;&nbsp;<a>
            </div>
            <a> </a>
        </div>
        <a> </a>
    </div>

    {{#  }); }}

    <div class="clear"></div>
</script>

<div id="defectiveTpl" class="hide">
        <div class="layui-form-item pt20 pl20">
            {{ d.html_table }}
        </div>
</div>

<script id="onclickSendDeliverTpl" type="text/html">
    <h2 class="layui-colla-title">发货包数{{ d.count }}包</h2>
    <table class="layui-table small-table">
        <thead>
        <tr>
            <th>订单号</th>
            <th>委外工厂</th>
            <th>车间倍率</th>
            <th>包号</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d.data, function(kkk, vvv){ }}
        <tr class="onclickSendDeliverTpl_tr" data-option="{{ vvv.order_id}}/{{ vvv.client_ordernum}}/{{ vvv.num_0}}/{{ vvv.num_1}}">
            <td>{{ vvv.client_ordernum}}</td>
            <td>{{ vvv.group_name}}</td>
            <td>
                {{#  if(vvv.unit_workshop == 0){ }}
                注意：没设置值
                {{# } else { }}
                {{ vvv.unit_workshop}}
                {{# } }}
                </td>
            <td>{{ vvv.num_0}}/{{ vvv.num_1}}包</td>
            <td>{{ vvv.shicai_count_sum}}</td>
            <td>
                <a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
            </td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
    <div class="layui-inline fr" style="margin: 20px 20px;">
        <button class="layui-btn layui-btn-normal save-distributing" >确定</button>
        <a href="javascript:layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
    </div>
</script>

{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">
    var res_data={};//所有数据集
    var txt_data={};
    var send_stock={};
    //#vue_tab_content
    const allContent = {
        data() {
            return {
                status_sum:''
        }
        }
    }
    const vm=Vue.createApp(allContent).mount('#vue_tab_content');

    layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form','flow'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        var flow = layui.flow;
        window.showDiv = function(id, msg) {
            tip_index_show=layer.tips("<span>"+msg+"</span>",
                "#"+id+"",
                {tips:[1, '#4794ec']});
            $("#"+id+"").mouseleave(function(){
                layer.close(tip_index_show);
            });
        }
        // 选择订单
        $(document).on('click','.actionSendDeliver',function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                for ( var key in send_stock ){
                    if( send_stock[$(this).attr('data-option')]==1){
                        delete send_stock[$(this).attr('data-option')];
                        break;
                    }
                }
            }else{
                $(this).addClass('active');
                send_stock[$(this).attr('data-option')] = 1;
            }
        });
        layui.jquery('.onclickSendDeliver').unbind();
        //弹出确认发货窗
        $(document).on('click','.onclickSendDeliver',function(e){
            e.stopPropagation();
            // console.log(send_stock);
            var client_ordernum_all=[];
            $.each(send_stock ,function (k,v)   {
                client_ordernum_all.push(k);
            });
            $.ajax({
                type: "POST",
                url: "{:url('mp/OutNodeProgress/waitDeliverCutPackageLabelGet')}",
                data: {client_ordernum_all:client_ordernum_all.toString()} ,
                dataType:"json",
                success: function(res){
                    if (res.code == 1) {
                        var content = laytpl($('#onclickSendDeliverTpl').html()).render({data:res.data,count:res.count});
                        layerDefective = layer.open({
                            type: 1
                            ,area: ['660px','auto']
                            ,offset: '100px'
                            ,anim: parseInt(Math.random()*(6+1),10)
                            ,skin:'layui-layer-molv'
                            ,title:'确认发货单'
                            ,content: content
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2,anim: 6});
                    }
                }
            });
        });
        //确认发货窗的删除按扭
        $(document).on('click','.onclickSendDeliverTpl_tr a',function(e){
            e.stopPropagation();
            $(this).parent().parent().hide();
        });
        // 保存基本信息
        $(document).on('click','.save-distributing',function(){
            var temp=[];
            $('.onclickSendDeliverTpl_tr').each(function(i){
                if(!$(this).is(':hidden')){
                    temp.push($(this).attr('data-option'));
                }
            });
            $.ajax({
                type: "POST",
                url: "{:url('mp/OutNodeProgress/sendConfirm')}",
                data: {info:temp.toString()},
                dataType:"json",
                success: function(res){
                    if(res.code == 1){
                        layer.msg(res.msg, {icon: 1});
                        window.location.reload();
                    }else {
                        layer.msg(res.msg, {icon: 2,anim: 6});
                    }
                }
            });
        });

        // 欠料明细
        $(document).on('click','.showMaterialQianDetailTable',function(e){
            e.stopPropagation();
            var client_ordernum = $(this).attr('data-option');
            var top="",foot="",data={};
            $.each(res_data ,function (k,v)  {
                if(v.client_ordernum==client_ordernum){
                    data=v;
                    return ;
                }
            })
            var html_table='<table class="layui-table small-table">' +
                '    <tr class="top">' +
                '        <td>物料名称</td>' +
                '        <td>物料SKU</td>' +
                '        <td>颜色</td>' +
                '    </tr>';
            if($.isEmptyObject(data.omListMin) == false){
                for (var k in data.omListMin){
                    html_table+='<tr class="foot">' +
                        '        <td class="copy-item">'+data.omListMin[k].name+'</td>' +
                        '        <td class="copy-item">'+data.omListMin[k].material_sku+'</td>' +
                        '        <td>'+data.omListMin[k].color+'</td>' +
                        '    </tr>';
                }
            }
            html_table+='</table>';
              var d={
                'html_table':html_table
            };
            var content = laytpl($('#defectiveTpl').html()).render(d);
            layerDefective = layer.open({
                type: 1
                ,area: ['660px','320px']
                ,offset: '100px'
                ,anim: parseInt(Math.random()*(6+1),10)
                ,skin:'layui-layer-molv'
                ,title:'订单'+client_ordernum+'--欠料明细'
                ,content: content
            });
        });

        laydate.render({
            elem: '#date_edit'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#date_edit').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#shipment_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#shipment_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        form.on('submit(demo1)', function (data) {
            layui.jquery('#view').html('');
            layui.jquery('#view').unbind();//重置page数
            send_stock={};//清空选择的订单项
            flowload( data.field);
            return false;
        });


        function flowload(formData=[]){
            flow.load({
                elem: '#view' //流加载容器
                //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    console.log(page)
                    var lis = [];
                    var url = "{:url('mp/OutNodeProgress/waitDeliver')}"+"?page="+page
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        dataType:"json",
                        success: function(res){
                            if($.isEmptyObject(res.data) == false){
                                txt_data=res.txt;
                                res_data=$.extend(res_data, res.data);
                                var Tpl = $('#tpl').html();
                                laytpl(Tpl).render(res.data, function(html){
                                    // $('#view').html(html);
                                    lis.push(html);
                                    next(lis.join(''), page <= res.pageInfo.maxPage);
                                });
                                $('.layui-flow-more').find('a').trigger('click');
                            } else {
                                $('#view').find('div.layui-flow-more').html('<a href="javascript:;">没数据了</a>');
                                lis.push('暂无数据');
                            }
                            //状态统计信息显示
                            status_sum(res,page);
                            if(res.code==10001){
                                location.href=res.url;
                            }
                            //去除多余的div clear
                            if(layui.jquery('#view').find('div.clear').length>=2){
                                layui.jquery('#view').find('div.clear')[0].remove();
                            }
                            element.init();
                        }
                    });
                }
            });

        }
        flowload($('#hisi-table-search-optable').serialize());

        //尺码细数
        window.showQuantityDetail = function(order_id,type='order_count') {
            $.ajax({
                type: "POST",
                url: "{:url('mp/OutNodeProgress/getQuantityDetail')}?order_id="+order_id+"&type="+type,
                dataType:"json",
                success: function(res){
                    var top="",foot="",data=res.data;
                    if($.isEmptyObject(data) == false){
                        for (var k in data){
                            top+="<td>"+data[k]['size_name']+"</td>";
                            foot+="<td>"+data[k][type]+"</td>";
                        }
                    } else {
                        top+="<td>空</td>";
                        foot+="<td>空</td>";
                    }
                    var table="<table class='layui-table small-table'>";
                    table+="<tbody>";
                    table+="<tr class='top'>";
                    table+="<td>尺码</td>";
                    table+=top;
                    table+="</tr>";
                    table+="<tr class='foot'>";
                    switch (type) {
                        case 'order_count':
                            table+="<td>下单件数</td>";
                            break;
                        case 'shicai_count':
                            table+="<td>裁剪件数</td>";
                            break;
                    }
                    table+=foot;
                    table+="</tr>";
                    table+="</tbody>";
                    table+="</table>";
                    tip_index=layer.tips(table,"#showQuantityDetail-"+type+"-"+order_id+"",{tips:[3, '#fff'],area: ['250px', 'auto'],time:10000});
                    $("#showQuantityDetail-"+type+"-"+order_id+"").mouseleave(function(){
                        layer.close(tip_index);
                    });
                }
            });
        }
    });

    //设置子工厂或分组
    function select_group_id(obj,order_id) {
        var group_id=$(obj).val();
        var url = "{:url('mp/Order/setGroupIdV2')}"
        $.ajax({
            type: "POST",
            url: url,
            data: {'order_id':order_id,'group_id':group_id,'outnodeset':1},
            dataType:"json",
            success: function(res){
            }
        });
    }
</script>